<template>
    <div class="Myphotoalbum">
        <div class="Myphotoalbum-head">
            <span>我的相册</span>
        </div>
        
        <div class="Myphotoalbum-centent">
            <ul>
                <li v-for="(item,index) in myImg[0].photo[0]" :key="index">
                    <!-- <img :src="item" alt="" v-image-preview> -->
                    <!-- {{item}} -->
                    <el-image 
                        :src="item" 
                        :preview-src-list="myImg[0].photo[0]"
                        class="elimg">
                    </el-image>
                </li>
                <li class="uploader-img">
                    <el-upload
                        class="avatar-uploader"
                        :action="domain"
                        :show-file-list="false"
                        :before-upload="beforeUploadGetKey"
                        :data="QiNiYun"
                        :on-success="UploadCreatcover"
                        >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img style="margin-left:19px;margin-top:-21px;width:95%;height:95%;" :src="imageUrl" alt="">
                        <div class="myPhoto_insert" @click="insert">
                            上传
                        </div>
                    </el-dialog>
                </li>
                <div v-if="myPhoto.length ==0" class="Noclass">
                    <label>
                        <img src="/images/暂无课程安排.png" alt="" class="noClassimg">
                        <span>暂无数据</span>
                    </label>
                </div>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name:'Myphotoalbum',
    data(){
        return{
            imageUrl:'/images/圆角矩形 32@2x.png',
            QiNiYun:{
                key:'avator',
                token:''
            },
            domain: "http://up-z0.qiniup.com",
            qiniuaddr: "http://101.37.66.151:8768/eg-api/push/upload/getToken",
            upload_qiniu_addr: "http://img.curiousmore.com/",
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
            myImg:[],
            dialogVisible: false,
            myPhoto:[],
        }
    },
    mounted() {
        this.getQiniuToken();
        this.GetimageUrl()
    },
    methods:{
        insert(){
            
            this.myPhoto = this.myPhoto.join(',')
            this.imageUrl = this.imageUrl + ',' + this.myPhoto
            console.log(this.myPhoto)
            console.log(this.imageUrl)
            let data = {
                photo : this.imageUrl,
                user_id : this.unserinfo.user_id
            }

            this.$axios({
                method:'POST',
                url:'http://101.37.66.151:8768/eg-api/user/userAlbum/insert',
                data:data
            }).then((res) =>{  
                console.log(res)              
                this.dialogVisible = false
                this.getQiniuToken();
                this.GetimageUrl()
            }).catch((error) =>{
                console.log(error)
            })
        },
        beforeUploadGetKey() {
            this.getQiniuToken();
        },
        UploadCreatcover(res, file) {
            this.imageUrl = this.upload_qiniu_addr + res.key;
            this.dialogVisible = true
        },
        getQiniuToken() {
            var data = {
                key: this.guid(),
                type: "pic"
            };
            this.$axios({
                method:'POST',
                url:'http://101.37.66.151:8768/eg-api/push/upload/getToken',
                data:data
            }).then((response) =>{  
                this.QiNiYun.token = response.data.data;  
                this.QiNiYun.key = data.key;     
            }).catch((error) =>{
                console.log(error)
            })
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            this.dialogVisible = true;
            console.log(this.imageUrl)
        },
        GetimageUrl(){
            var data ={
                user_id : this.unserinfo.user_id
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/userAlbum/query',
                params:data,
            }).then((res) =>{
                console.log(res.data.data)
                this.myImg = res.data.data
                if(res.data.data == []){
                    this.myPhoto =[]
                }else{
                    let arr = []
                    let arrImg = this.myImg[0].photo.split(',')
                    
                    arrImg.forEach(e => {
                        arr.push(e)
                    });
                    this.myPhoto = arr
                }
                console.log(this.myPhoto,'我的图片')
            }).catch((error) =>{
                console.log(error)
            })
        }
    }
}
</script>
<style lang="less" scoped>
.Noclass{
    position: relative;
    width: 90%;
    margin: 0 auto;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    .noClassimg{
        width: 65px;
        height: 55px;
    }
}
.Noclass>label{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.Noclass>label>span{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: #d8d8d8;
    margin-top: 10px;
}
    .myPhoto_insert{
        position: absolute;
        right: 442px;
        bottom: 2px;
        width: 64px;
        height: 30px;
        background: #47cecf;
        color: #fff;
        border-radius: 13px;
        text-align: center;
        letter-spacing: 6px;
        line-height: 30px;
        cursor: pointer;
    }
    .Myphotoalbum{
        position: relative;
        width: 100%;
        background: #ffffff;
        border-radius: 20px;
        padding-bottom: 100px;
    }
    .Myphotoalbum-head{
        position: relative;
        width: 90%;
        height: 80px;
        border-bottom: 2px solid #47CECF;
        margin: 0 auto;
        display: flex;
        align-items: center;
        span{
            border-left: 14px solid #47CECF;
            color: #2DC7C8;
            font-size: 20px;
            font-weight: bold;
            width: 40%;
            padding-left: 1%;
        }
    }
    .Myphotoalbum-centent{
        position: relative;
        width: 90%;
        margin: 0 auto;
    }
    .Myphotoalbum-centent>ul{
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0;
        li{
            width: 18%;
            height: 185px;
            margin-top: 30px;
            /deep/.el-image{
                width: 100%;
                height: 184px;
                border-radius: 20px;
            }
            
        }
    }
    .elimg{
        /deep/.el-icon-circle-close {
        color: white;
        }
    }
    .uploader-img{
        background:rgba(241,241,241,1);
        border-radius:15px;
        /deep/.avatar-uploader{
            width: 100%;
            height: 100%;
        }
        /deep/.el-upload{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }
        .avatar{
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
        }
    }
    .uploader-img>div{
        width: 100%;
        height: 100%;
    }
</style>